<template>
  <div class="account-container">
    <div class="title">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="账号管理" name="first"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="header">
      <div class="header-left">
        <el-dropdown @command="isForbidden" trigger="click">
          <span class="el-dropdown-link">
            全部状态
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in options"
              :key="item.value"
              :command="item.value"
            >{{item.label}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <my-input @search="mySearch"></my-input>
      </div>
      <div class="header-right">
        <el-button class="addAcount" @click="addAcount">新增账号</el-button>
      </div>
    </div>
    <div class="content">
      <Table :tableData="tableData"></Table>
    </div>
    <Pagination :pageSize="pageSize" :total="total" :currentPage="currentPage" 
    @currentChange="currentChange"
    class="pagination"></Pagination>
  </div>
</template>
<script>
import MyInput from "@/common/input/index";
import Table from "@/views/account/table";
import Pagination from "@/common/pagination/pagination";
import { getAccountList } from "@/api/operation";
import { ERR_OK } from "@/api/config";
export default {
  data() {
    return {
      activeName: "first",
      keyword: "",
      is_forbidden: "",
      tableData: [],
      pageSize: 15,
      total: 0,
      currentPage: 1,
      page: 1,
      is_forbidden: undefined,
      options: [
        {
          label: '启用',
          value: 1
        },
        {
          label: '禁用',
          value: 2
        }
      ]
    };
  },
  methods: {
    currentChange(val) {
      this.page = val
      this._getAccountList(this.page, this.is_forbidden, this.keyword)
    },
    isForbidden(val) {
      this.page = 1
      this.currentPage = 1
      this.is_forbidden = val
      this._getAccountList(this.page, this.is_forbidden, this.keyword)
    },
    mySearch(keyword) {
      this.page = 1;
      this.currentPage = 1
      this.keyword = keyword
      if (!this.keyword) {
        this.is_forbidden = undefined
      }
      this._getAccountList(this.page, this.is_forbidden, this.keyword);
    },
    addAcount() {
      this.$router.push({ path: "/account/accountlist/addAccount" });
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    _getAccountList(page, is_forbidden, keyword) {
      getAccountList(page, is_forbidden, keyword)
        .then(res => {
          if (res.code == ERR_OK) {
            this.tableData = res.data.list;
            this.total = res.data.total
            console.log(res);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this._getAccountList(this.page);
  },
  components: {
    MyInput,
    Table,
    Pagination
  }
};
</script>
<style lang="scss" scoped>
.account-container {
  padding: 20px;
  padding-top: 50px;
  padding-bottom: 50px;
  .title {
    .el-tabs /deep/ .el-tabs__nav-wrap::after {
      background: #fff !important;
    }
    .el-tabs /deep/ .el-tabs__item.is-active {
      color: #444 !important;
    }
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header-left {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
  }
  .header-right {
    .addAcount {
      width: 87px;
      height: 30px;
      line-height: 20px;
      border-radius: 6px;
      background-color: rgba(27, 166, 135, 1);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      padding: 0;
      color: #fff;
    }
  }
}
.pagination{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 30px;
}
</style>